<template>
  <div class="product-line-detail-container">
    <ul class="nav-box">
      <li
        v-for="item in navData"
        :key="item"
        :class="{active: item === currentNav}"
        @click="changeNav(item)"
      >{{ item }}</li>
    </ul>

    <div
      class="device-wrapper"
      v-show="currentNav === '设备列表'"
    >
      <div class="search-box border-bottom">
        <van-dropdown-menu active-color="#3378FF">
          <van-dropdown-item
            v-model="type"
            :options="typeOption"
            description="类型"
            @change="changetype"
          />
        </van-dropdown-menu>
        <form
          action="/"
          class="form-search"
        >
          <van-search
            shape="round"
            v-model="searchKey"
            placeholder="搜索设备编号/设备名称"
            @search="getProductLineDeviceList"
            @clear="getProductLineDeviceList"
          />
        </form>
      </div>

      <ul
        class="list-box scroll-box"
        v-if="filterDeviceList.length"
      >
        <li
          v-for="item in filterDeviceList"
          :key="item.id"
          @click="jumpDetail(item)"
        >
          <div class="device-img">
            <img
              :src="item.cover || require('@/assets/images/device_default.png')"
              alt=""
            >
          </div>
          <p class="device-status-category">
            <span
              class="color-gray"
              v-if="item.device_status === 1"
            >
              <i class="iconfont iconlixian"></i>
              离线
            </span>
            <span
              class="color-green"
              v-if="item.device_status === 2"
            >
              <i class="iconfont iconzaixian"></i>
              在线
            </span>
            <span
              class="color-red"
              v-if="item.device_status === 4"
            >
              <i class="iconfont iconyubaojing"></i>
              报警
            </span>
            <span>{{ item.device_type_name }}</span>
          </p>
          <p class="device-name">{{ item.device_name }}</p>
          <p class="device-num">编号：{{ item.device_number }}</p>
        </li>
      </ul>

      <div
        class="no-data-box"
        v-if="noDataState"
      >暂无数据</div>
    </div>

    <ul
      class="basic-info-wrapper scroll-box"
      v-show="currentNav === '基本信息'"
    >
      <li>
        <span class="tag-name">产线名称</span>
        <span class="tag-content">{{ details.name }}</span>
      </li>
      <li>
        <span class="tag-name">产线编号</span>
        <span class="tag-content">{{ details.number}}</span>
      </li>
      <li>
        <span class="tag-name">创建时间</span>
        <span class="tag-content">{{ details.created_date }}</span>
      </li>
      <li>
        <span class="tag-name">设备总量</span>
        <span class="tag-content">{{ details.device_number }}</span>
      </li>
      <li>
        <span class="tag-name">客户名称</span>
        <span class="tag-content">{{ details.customer_name }}</span>
      </li>
      <li>
        <span class="tag-name">参与项目</span>
        <div class="tag-content product-name">
          <p
            v-for="item in details.projectList"
            :key="item.id"
          >{{ item.project_name }}</p>
        </div>
      </li>
      <li>
        <span class="tag-name">备注说明</span>
        <span class="tag-content remark">{{ details.remark }}</span>
      </li>
    </ul>

    <!-- <div
      class="scada-wrapper"
      v-show="currentNav === '产线组态'"
    >
      <div class="no-data-box">
        <img src="../../../assets/images/deviceCenter/no_scada.png">
        <p>当前未绑定产线组态</p>
      </div>
    </div> -->

  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, Search } from 'vant';
import { getProductLineDeviceList, getProductLineDetails } from '@/api/proLineManage.js';

export default {
  name: 'ProductLineDetail',
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Search.name]: Search
  },
  data() {
    return {
      currentNav: '设备列表',
      navData: ['设备列表', '基本信息'],
      searchKey: '',
      deviceList: [],
      filterDeviceList: [],
      details: {},
      noDataState: false,
      type: '全部类型',
      typeOption: []
    };
  },
  created() {
    this.createTypeData();
    this.getProductLineDeviceList();
    this.getProductLineDetails();
  },
  methods: {
    // 创建设备状态数据
    createTypeData() {
      let typeArr = ['全部类型', '搬运类', '输送类', '包装类', '其他类'];
      typeArr.map((item, index) => {
        this.typeOption.push({
          text: item,
          value: item
        });
      });
    },
    // 选择类别
    changetype() {
      if (this.type === '全部类型') {
        this.filterDeviceList = this.deviceList;
      } else {
        let filterArr = this.deviceList.filter(item => {
          return item.device_type_name === this.type;
        });
        this.filterDeviceList = filterArr;
      }

      this.noDataState = this.filterDeviceList.length ? false : true;
    },
    // 获取设备列表
    getProductLineDeviceList() {
      getProductLineDeviceList({
        product_line_id: this.$route.query.id,
        search: this.searchKey
      }).then(res => {
        this.deviceList = res.data.list || [];
        this.filterDeviceList = JSON.parse(JSON.stringify(this.deviceList));
        this.noDataState = this.filterDeviceList.length ? false : true;
      });
    },
    // 获取产线详情
    getProductLineDetails() {
      getProductLineDetails({
        id: this.$route.query.id
      }).then(res => {
        this.details = res.data.details;
        this.details.projectList = res.data.project_list;
      });
    },
    // 切换菜单
    changeNav(nav) {
      this.currentNav = nav;
    },
    // 去详情
    jumpDetail(item) {
      if (this.$checkBtnPermission('deviceCenter:deviceManage:list:detail')) {
        this.$router.push({
          name: 'deviceDetail',
          query: {
            id: item.device_id,
            deviceName: item.device_name,
            videoId: item.video_id,
            modelId: item.device_model_id,
            modelName: item.model_name,
            controlPwd: item.control_pwd
          }
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.product-line-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .nav-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 1.226667rem;
    border-bottom: 1px solid #f2f6fc;
    background-color: #fff;

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: #999999;
      font-size: 0.373333rem;

      &.active {
        position: relative;
        color: #333333;

        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0.053333rem;
          background-color: var(--color-primary);
        }
      }
    }
  }

  // 设备列表
  .device-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 0;

    .search-box {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      height: 1.44rem;
      border-bottom: 1px solid var(--border-color);

      .van-dropdown-menu {
        height: 100%;
        background-color: #fff;

        ::v-deep .van-dropdown-menu__bar {
          height: 100%;
          box-shadow: unset;
        }
      }

      .van-search {
        flex: 1;
      }
    }

    .list-box {
      display: grid;
      grid-template-columns: repeat(auto-fill, 4.88rem);
      column-gap: 0.213333rem;
      row-gap: 0.213333rem;
      width: 100%;
      padding: 0.213333rem 0;

      li {
        // width: 4.88rem;
        // margin-bottom: 0.213333rem;
        padding: 0.32rem;
        background-color: #fff;

        &:nth-of-type(odd) {
          float: left;
        }

        &:nth-of-type(even) {
          float: right;
        }

        .device-img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 2.293333rem;
          margin-bottom: 0.053333rem;
          padding: 0.213333rem 0.88rem;
          border: 1px solid #ebeef5;
          overflow: hidden;

          img {
            max-width: 100%;
            height: 100%;
          }
        }

        .device-status-category {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.213333rem;

          span {
            &:first-of-type {
              font-size: 0.346667rem;

              i {
                font-size: 0.346667rem;
              }
            }

            &:last-of-type {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0.053333rem 0.16rem;
              color: #666666;
              font-size: 0.32rem;
              border-radius: 100em;
              background-color: #f6f6f6;
            }
          }
        }

        .device-name {
          margin: 0.266667rem 0;
          line-height: 0.533333rem;
          color: #333333;
          font-size: 0.4rem;
        }

        .device-num {
          color: #999999;
          font-size: 0.346667rem;
        }
      }
    }
  }

  // 基本信息
  .basic-info-wrapper {
    width: 100%;
    padding: 0 0.426667rem;
    background-color: #fff;

    li {
      display: flex;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.373333rem;

      &:last-of-type {
        border-bottom: 0;
      }

      .tag-name {
        flex-shrink: 0;
        width: 2.346667rem;
        padding-right: 0.426667rem;
        color: #999999;
      }

      .tag-content {
        flex: 1;
        color: #333333;

        &.product-name {
          color: var(--color-primary);

          p {
            margin-top: 0.213333rem;

            &:first-of-type {
              margin-top: 0;
            }
          }
        }

        &.remark {
          position: relative;
          top: -0.08rem;
          line-height: 0.533333rem;
        }
      }
    }
  }

  // 产线组态
  .scada-wrapper {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .no-data-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      img {
        width: 5.866667rem;
        height: 4.4rem;
        margin: 1.066667rem 0 0.426667rem;
      }

      p {
        color: #999999;
        font-size: 0.426667rem;
      }
    }
  }
}
</style>